<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  // 订单数据图标
  renderChart();
  // 产品类别表
  renderOrderChart();
});

const renderChart = () => {
  const chartDom = document.getElementById('chart');
  const myChart = echarts.init(chartDom);
  const option = {
    textStyle: {
      fontFamily: '阿里妈妈方圆体 Alimama FangYuanTi VF'
    },
    title: {
      text: '订单数据（今日）',
      textStyle: {
        fontWeight: '500',
        fontSize: '16px'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,

      axisLabel: {
        interval: 0 // 显示所有刻度
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '20%']
    },
    visualMap: {
      type: 'piecewise',
      show: false,
      dimension: 0,
      seriesIndex: 0
      // pieces: [
      //     {
      //         gt: 1,
      //         lt: 3,
      //         color: 'rgba(0, 0, 180, 0.4)'
      //     },
      //     {
      //         gt: 5,
      //         lt: 7,
      //         color: 'rgba(0, 0, 180, 0.4)'
      //     }
      // ]
    },
    series: [
      {
        type: 'line',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0.01, color: '#1EE7FF' }, // 1%
            { offset: 0.57, color: '#249AFF' }, // 57%
            { offset: 0.85, color: '#6F42FB' }, // 85%
            { offset: 0.99, color: '#6F42FB' } // 99%
          ]),
          width: 2
        },
        itemStyle: {
          color: '#E5E8EF'
          // emphasis:{color:'red'}
        },
        markLine: {
          symbol: ['none', 'none'],
          label: { show: false },
          data: [
            { xAxis: 1 },
            { xAxis: 2 },
            { xAxis: 3 },
            { xAxis: 4 },
            { xAxis: 5 },
            { xAxis: 6 },
            { xAxis: 7 },
            { xAxis: 8 }
          ]
        },
        areaStyle: {
          // 设置下方填充区域的颜色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 纵向渐变色
            { offset: 0, color: 'rgba(17, 126, 255, 0.16)' }, // 渐变色顶部
            { offset: 1, color: 'rgba(17, 128, 255, 0)' } // 渐变色底部
          ])
        },
        data: [
          ['2019-10-10', 200],
          ['2019-10-11', 560],
          ['2019-10-12', 750],
          ['2019-10-13', 580],
          ['2019-10-14', 250],
          ['2019-10-15', 300],
          ['2019-10-16', 450],
          ['2019-10-17', 300],
          ['2019-10-18', 100]
        ]
      }
    ]
  };
  option && myChart.setOption(option);
};
const renderOrderChart = () => {
  const orderView = document.getElementById('order-view');

  const orderChart = echarts.init(orderView);
  const data = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'bottom'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine', itemStyle: { color: '#249EFF' } },
          { value: 735, name: 'Direct', itemStyle: { color: '#21CCFF' } },
          { value: 580, name: 'Email', itemStyle: { color: '#313CA9' } }
        ]
      }
    ]
  };
  data && orderChart.setOption(data);
};
</script>

<template>
  <div class="relative pr-312px">
    <div class="user">
      <div class="header">
        <span>👏 欢迎回来，Ryan Septimus</span>
      </div>
      <div class="views">
        <div class="views-box">
          <div><ElImage class="image" src="/src/assets/images/book.png" mode="scaleToFill" /></div>
          <div class="flex-1">
            <div class="title mb-8px">今日订单</div>
            <div class="flex">
              <strong class="text-22px pr-12px">3500</strong>
              <sup class="title unit">单</sup>
            </div>
          </div>
        </div>
        <div class="views-box">
          <div><ElImage class="image" src="/src/assets/images/book.png" mode="scaleToFill" /></div>
          <div class="flex-1">
            <div class="title mb-8px">投放中的广告</div>
            <div class="flex">
              <strong class="text-22px pr-12px">3500</strong>
              <sup class="title unit">M</sup>
            </div>
          </div>
        </div>
        <div class="views-box">
          <div><ElImage class="image" src="/src/assets/images/book.png" mode="scaleToFill" /></div>
          <div class="flex-1">
            <div class="title mb-8px">今日访客量</div>
            <div class="flex">
              <strong class="text-22px pr-12px">3500</strong>
              <sup class="title unit">M</sup>
            </div>
          </div>
        </div>
        <div class="views-box">
          <div><ElImage class="image" src="/src/assets/images/book.png" mode="scaleToFill" /></div>
          <div class="flex-1">
            <div class="title mb-8px">较昨日新增</div>
            <div class="flex">
              <strong class="text-22px pr-4px">2.8%</strong>
              <div class="title unit">
                <ElIcon :size="13" color="#F53F3F">
                  <icon-mdi:triangle />
                </ElIcon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="data-photo">
        <div id="chart" class="chartDom"></div>
      </div>
    </div>
    
    <div class="popular_products w-full flex gap-16px">
      <div class="left w-50%">
        <div class="title">
          <span class="left-title">线上热门产品</span>
          <span class="more">查看更多</span>
        </div>
        <div class="product-list">
          <div class="product-list-title">
            <div>毛利</div>
            <div>单量</div>
            <div>GMV</div>
          </div>
          <div class="product-list-content">
            <div style="height: 40px; background-color: #f2f3f8">
              <span class="text" style="width: 52px; display: flex; justify-content: center">排名</span>
              <span class="text" style="width: 203px">产品标题</span>
              <span class="text" style="width: 83px; display: flex; justify-content: center">总毛利</span>
              <span class="text" style="width: 83px; display: flex; justify-content: center">日涨幅</span>
            </div>
            <div v-for="(item, index) in 5" :key="item" class="content" style="height: 40px">
              <span class="text" style="width: 52px; display: flex; justify-content: center">{{ index + 1 }}</span>
              <span class="text" style="width: 203px">产品标题</span>
              <span class="text" style="width: 83px; display: flex; justify-content: center">总毛利</span>
              <span class="text" style="width: 83px; display: flex; justify-content: center">日涨幅</span>
            </div>
          </div>
        </div>
      </div>
      <div class="order-list w-50%">
        <div class="title"><span>产品类别占比</span></div>
        <div id="order-view"></div>
      </div>
    </div>
      
    <el-space class="right" direction="vertical" :size="16">
      <div class="p-20px bg-white">
        <div style="background-color: white">
          <div class="title">
            <span>快捷入口</span>
            <span style="color: #165dff; font-size: 12px">管理</span>
          </div>
          <div class="quickEntrance">
            <div v-for="(item, index) in 5" :key="index" class="quickEntrance-item">
              <ElImage src="/src/assets/images/language.png" class="quickEntrance-item-img"></ElImage>
              <span>店铺管理</span>
            </div>
          </div>
          <div class="title" style="margin-top: 16px; margin-bottom: 16px"><span>待办事项</span></div>
          <div class="quickEntrance" style="height: 85px; border: no">
            <div v-for="(item, index) in 3" :key="index" class="quickEntrance-item">
              <ElImage src="/src/assets/images/language.png" class="quickEntrance-item-img"></ElImage>
              <span>店铺管理</span>
            </div>
          </div>
        </div>
      </div>
      <div class="poster">
        <ElImage src="/src/assets//images/Rectangle.png"></ElImage>
      </div>
      <div class="notice">
        <div class="title">
          <span>公告</span>
          <span>查看更多</span>
        </div>
        <div class="notice-content">
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
        </div>
      </div>
      <div class="help-document">
        <div class="title">
          <span>帮助文档</span>
          <span>查看更多</span>
        </div>
        <div class="help-document-content">
          <div class="document-item"><span>产品概述</span></div>
          <div class="document-item"><span>产品概述</span></div>
          <div class="document-item"><span>产品概述</span></div>
          <div class="document-item"><span>产品概述</span></div>
        </div>
      </div>
    </el-space>
    
  </div>
</template>

<style lang="scss" scoped>
.user {
  padding: 0 20px;
  background-color: white;
  justify-content: center;
  height: 548px;

  .header {
    display: flex;
    align-items: center;
    height: 71px;
    border-bottom: 1px solid #e5e8ef;
    border-radius: 4px;
  }

  .views {
    height: 95px;
    display: flex;
    border-bottom: 1px solid #e5e8ef;
    border-radius: 4px;

    .views-box {
      display: flex;
      align-items: center;
      width: 25%;
      height: 94px;
    }

    .image {
      width: 54px;
      height: 54px;
    }

    .title {
      font-size: 12px;
      color: #1d2129;
    }
  }

  .data-photo {
    padding-top: 20px;
    height: 300px;
    width: 100%;

    .chartDom {
      width: 100%;
      height: 300px;
    }
  }
}

.popular_products {
  margin-top: 16px;
  height: 388px;

  .left {
    padding: 20px;
    height: 100%;
    background-color: white;
    border-radius: 4px;

    .title {
      display: flex;
      justify-content: space-between;
      padding: 0 0 16px 0;
      align-items: center;

      .left-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #1d2129;
      }

      .more {
        font-size: 12px;
        color: #165dff;
      }
    }

    .product-list-title {
      padding: 12px;
      box-sizing: border-box;
      width: 202px;
      list-style-type: none;
      display: flex;
      font-size: 12px;

      height: 28px;
      font-weight: normal;
      color: #4e5969;
      background-color: #f2f3f8;
      justify-content: space-between;
      align-items: center;

      div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 22px;
        background: white;
      }
    }

    .product-list-content {
      margin-top: 10px;
      height: 240px;
      width: 100%;
      background-color: white;

      .text {
        font-size: 14px;
        font-weight: 500;
      }

      .content {
        display: flex;
        align-items: center;
      }
    }

    .product-list-content :nth-child(1) {
      display: flex;
      align-items: center;
    }
  }

  .order-list {
    @extend .left;

    .title {
      height: 24px;
      display: flex;
      justify-content: space-between;
      padding: 0 0 16px 0;
      align-items: center;
    }

    #order-view {
      height: 284px;
      width: 100%;
    }
  }
}

.right {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 280px;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .quickEntrance {
    width: 100%;
    height: 156px;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #f2f3f5;

    .quickEntrance-item {
      // flex: 0 0 33%;
      width: 64px;
      display: flex;
      justify-content: center;
      height: 64px;
      flex-direction: column;
      align-items: center;
      margin-right: 15px;

      .quickEntrance-item-img {
        width: 18px;
        height: 18px;
        margin-bottom: 16px;
      }

      span {
        font-size: 12px;
      }
    }
  }
}

.poster {
  width: 280px;
  height: 170px;
  background-color: red;
  border-radius: 4px;
}

.notice {
  padding: 20px;
  width: 280px;
  height: 212px;
  border-radius: 4px;
  background: #ffffff;

  .notice-content {
    width: 188px;
    height: 20px;

    .notice-content-info {
      width: 100%;
      height: 20px;
      align-items: center;
      display: flex;
      margin-bottom: 8px;

      .info-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 20px;
        color: #ff7d00;
        font-size: 14px;
        margin-right: 8px;
        background-color: #fff7e8;
      }

      .info-content {
        font-size: 14px;
        color: #4e5969;
      }
    }
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;

  span:nth-of-type(2) {
    font-size: 12px;
    color: #165dff;
  }
}

.help-document {
  padding: 20px;
  width: 280px;
  height: 161px;
  background: #ffffff;

  .help-document-content {
    display: flex;
    flex-wrap: wrap;

    .document-item {
      margin-bottom: 18px;
      color: #4e5969;
      width: 117px;
      height: 20px;
      font-size: 14px;
      font-weight: normal;
    }
  }
}
</style>
